<template>
    <div id="app">
        <el-table :data="teachers.item" v-loading="loading"
          style="width:100%">
            <el-table-column prop="name" align="center" label="姓名">
              <template slot-scope="scope">
                <el-popover trigger="hover" placement="top">
                  <P>姓名：{{scope.row.name}}</P>
                  <P>工号/证件号：{{scope.row.code}}</P>
                  <p>部门：{{scope.row.department_name}}</p>
                  <p>性别：{{scope.row.gender}}</p>
                  <p>教师类型：{{scope.row.teacher_type}}</p>
                  <p>手机号：{{scope.row.mobile_phone}}</p>
                  <p>邮箱：{{scope.row.email}}</p>
                  <div slot="reference" class="name-wrapper">
                    <el-tag size="medium">{{scope.row.name}}</el-tag>
                  </div>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column prop="code" align="center" label="工号">
            </el-table-column>
            <el-table-column prop="status" align="center" label="状态">
              <template slot-scope="scope">
                <el-tag :type="scope.row.status == 1 ? 'success' : scope.row.stauts == 0 ? 'error' : 'danger' " close-transition>
                  {{scope.row.status== 1 ? "激活": scope.row.status == 0 ? "未激活": "待审批"}}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="gender" align="center" label="性别">
            </el-table-column>
            <el-table-column prop="department_name" align="center" label="部门">
            </el-table-column>
            <el-table-column prop="teacher_type" align="center" label="教师类型">
            </el-table-column>
            <el-table-column v-if="false" prop="mobile_phone" align="center" label="教师类型">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
           </el-table-column>
        </el-table>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="teachers.pageNumber"
            :page-sizes="[20, 30, 50, 100]"
            :page-size="teachers.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="teachers.total">
        </el-pagination>
    </div>
</template>
<script>
    import { mapGetters } from 'vuex'
    import axios from 'axios'
    export default {
      name: 'teacherSetting',
      data() {
        return {
          teachers: {
            total: 0,
            pageNumber: 1,
            pageSize: 20,
            item: []
          },
          username: '',
          loading: false,
          multipleSelection: [],
          currentPageNumber: 1,
          t: {
            code: '',
            name: '',
            department_name: '',
            department_code: '',
            gender: '',
            teacher_type_code: '',
            status: ''
          },
          tt: {
            id: '',
            code: '',
            name: '',
            gender: '',
            birthday: '',
            status: '',
            teacher_type: '',
            registered: '',
            message: '',
            teachers: '',
            mobiles: '',
            ids: ''
          },
          activePublisherRoles: [],
          activePublisher: {
            activePublisherName: ''
          }
        }
      },
      computed: {
        ...mapGetters([
          'name',
          'roles',
          'teacherTypeCode',
          'roleId'
        ])
      },
      mounted: function() {
        this.getNoticeProxy()
      },
      methods: {
        getNoticeProxy: function() {
          this.loading = true
          const formData = new FormData()
          formData.append('roleId', this.roleId)
          formData.append('pageNumber', this.teachers.pageNumber)
          formData.append('pageSize', this.teachers.pageSize)
          axios.post('/api/teachers/getNoticeProxy', formData).then(response => {
            this.teachers.item = response.data.result
            if (response.data.result.length > 0) {
              this.teachers.total = response.data.result[0]['total']
            } else {
              this.teachers.total = 0
            }
            this.loading = false
          }).catch(error => {
            console.log(error)
            this.$message.error('获取代领监考通知人员失败，请稍后重试')
            this.loading = false
          })
        },
        handleDelete(index, row) {
          const formData = new FormData()
          formData.append('id', row.id)
          axios.post('/api/teachers/deleteNoticeProxy', formData).then(response => {
            if (response.data.result === 'success') {
              this.$message.success('删除成功')
              this.refetchCurrentPage()
            } else {
              this.$message.error('删除失败')
            }
          }).catch(error => {
            console.log(error)
            this.$message.error('删除失败')
          })
        },
        handleSizeChange: function(val) {
          this.loading = true
          const formData = new FormData()
          formData.append('roleId', this.roleId)
          formData.append('pageNumber', this.teachers.pageNumber)
          formData.append('pageSize', val)
          axios.post('/api/teachers/getNoticeProxy', formData).then(response => {
            this.teachers.item = response.data.result
            if (response.data.result.length > 0) {
              this.teachers.total = response.data.result[0]['total']
            } else {
              this.teachers.total = 0
            }
            this.loading = false
          }).catch(error => {
            console.log(error)
            this.$message.error('获取代领监考通知人员失败，请稍后重试')
            this.loading = false
          })
        },
        handleCurrentChange: function(val) {
          this.loading = true
          this.currentPageNumber = val
          const formData = new FormData()
          formData.append('roleId', this.roleId)
          formData.append('pageNumber', val)
          formData.append('pageSize', this.teachers.pageSize)
          axios.post('/api/teachers/getNoticeProxy', formData).then(response => {
            this.teachers.item = response.data.result
            if (response.data.result.length > 0) {
              this.teachers.total = response.data.result[0]['total']
            } else {
              this.teachers.total = 0
            }
            this.loading = false
          }).catch(error => {
            console.log(error)
            this.$message.error('获取代领监考通知人员失败，请稍后重试')
            this.loading = false
          })
        },
        refetchCurrentPage: function() {
          this.loading = true
          // console.log(this.teachers)
          const formData = new FormData()
          formData.append('roleId', this.roleId)
          formData.append('pageNumber', this.currentPageNumber)
          formData.append('pageSize', this.teachers.pageSize)
          axios.post('/api/teachers/getNoticeProxy', formData).then(response => {
            this.teachers.item = response.data.result
            if (response.data.result.length > 0) {
              this.teachers.total = response.data.result[0]['total']
            } else {
              this.teachers.total = 0
            }
            this.loading = false
          }).catch(error => {
            console.log(error)
            this.$message.error('获取代领监考通知人员失败，请稍后重试')
            this.loading = false
          })
        }
      }
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  #app {
        margin: 50px;
    }
  #searchConditions{
        border:1px solid;
        padding:10px;
    }
  table {
        font-size:12px;
        line-height:10px;
    }
  .upload {
        border:1px solid;
        margin:50px;
        padding:20px;
    }
</style>

<style rel="stylesheet/scss" lang="scss">
 a:-webkit-any-link {
    color: -webkit-link;
    cursor: pointer;
    text-decoration: underline;
}
</style>